---
title: 외부 링크에 아이콘 추가
description: Markdown 파일의 외부 링크에 아이콘을 추가하기 위해 rehype 플러그인을 설치하는 방법을 알아보세요.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown 파일의 링크를 식별하고 수정할 수 있습니다. 이 예시에서는 방문자가 사이트를 떠난다는 것을 알 수 있도록 각 외부 링크 끝에 아이콘을 추가합니다.

## 전제 조건

- 콘텐츠 페이지에 Markdown을 사용하는 Astro 프로젝트가 필요합니다.

## 레시피

1. `rehype-external-links` 플러그인을 설치합니다.

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rehype-external-links
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rehype-external-links
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rehype-external-links
        ```
        </Fragment>
      </PackageManagerTabs>

2. 플러그인을 `astro.config.mjs` 파일로 가져옵니다.

	content 속성이 포함된 옵션 객체와 함께 `rehypeExternalLinks`를 `rehypePlugins` 배열에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의 `type`을 `text`로 설정하세요. 대신 링크 끝에 HTML을 추가하려면 `type` 속성을 `raw`로 설정하세요.

    ```ts
    // ...
    import rehypeExternalLinks from 'rehype-external-links';

    export default defineConfig({
      // ...
      markdown: {
        rehypePlugins: [
          [
            rehypeExternalLinks,
            {
              content: { type: 'text', value: ' 🔗' }
            }
          ],
        ]
      },
    });
    ```

:::note
  `content` 속성의 값은 [접근성 트리에 표시되지 않습니다](https://developer.mozilla.org/ko/docs/Web/CSS/content). 따라서 아이콘에만 의존하기보다는 링크가 주변 콘텐츠 외부에 있다는 점을 분명히 하는 것이 가장 좋습니다.
:::

## 자료

- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)
